<template>
  <div id="all">
    <el-card class="box-card">
      <div id="search_bar">
        <div class="span">
          订单编号：
          <div class="div_inner">
            <el-input v-model="orderNo" id="orderNo" placeholder="请输入关键字"></el-input>
          </div>
        </div>
        <div class="span">
          用户账号：
          <div class="div_inner">
            <el-input v-model="userId" id="userId" placeholder="请输入关键字"></el-input>
          </div>
        </div>
        <div class="span">
          订单来源：
          <el-select v-model="orderFrom" placeholder="请选择" clearable @change="selectTrigger(orderFrom)">
            <el-option v-for="item in options" :key="item.orderFrom" :label="item.label"
                       :value="item.orderFrom"></el-option>
          </el-select>
        </div>

        <div class="span">
          <el-button type="primary" size="small" @click="getOrderList" icon="el-icon-search">查询</el-button>
        </div>

        <div class="span">
          <el-button size="small" @click="reset">重置</el-button>
        </div>
        <div class="span">
          <el-button type="primary" size="small" @click="centerDialogVisible = true">高级筛选</el-button>
        </div>
        <div class="span">
          <el-button type="danger" size="small" @click="reset">批量关闭</el-button>
        </div>
      </div>
      <div id="body">
        <h4 style="margin-left: 0px;float: left">待发货列表</h4>
        <template>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column prop="orderNo" label="订单编号" align="center" width="160" sortable>
            </el-table-column>
            <el-table-column prop="userId" label="用户ID" align="center" width="160">
            </el-table-column>
            <el-table-column prop="actualPrice" label="订单金额" align="center" width="160" sortable>
            </el-table-column>
            <el-table-column prop="beginTime" label="下单时间" align="center" width="160" sortable
                             :formatter="this.$myFormat.formatDate">
            </el-table-column>
            <el-table-column prop="status" label="订单状态" align="center" width="160"
                             :formatter="this.$myFormat.orderStatus">
            </el-table-column>
            <el-table-column prop="payType" label="支付方式" align="center" width="160" :formatter="this.$myFormat.payType">
            </el-table-column>
            <el-table-column prop="orderFrom" label="订单来源" align="center" width="160"
                             :formatter="this.$myFormat.orderFrom">
            </el-table-column>

            <el-table-column fixed="right" align="center" label="操作" width="300">
              <template slot-scope="scope">
                <!--                <el-button type="text" size="mini" v-if="scope.row.status===1" @click="openSendDialog(scope.row)">-->
                <!--                  发货-->
                <!--                </el-button>-->
                <el-button type="text" size="mini">
                  查看订单
                </el-button>
                <!--                <el-button type="text" @click="openCloseOrderDialog(scope.row)" size="mini"-->
                <!--                           v-if="scope.row.status===0 || scope.row.status===1">-->
                <!--                  关闭订单-->
                <!--                </el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- 分页组件 -->
      <div class="block" style="margin-top: 20px;">
        <el-pagination background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-sizes="[6, 12, 20]"
                       :page-size="6"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total=total>
        </el-pagination>
        <!--   :current-page="currentPage" 默认显示页面-->
      </div>
      <!--高级筛选弹出框-->
      <el-dialog
        title="高级筛选"
        :visible.sync="centerDialogVisible"
        width="30%"
        @open="open">
        <div>
          <span class="span2">订单编号</span>
          <el-input v-model="orderNo"></el-input>
          <span class="span2">用户账号</span>
          <el-input v-model="userId"></el-input>
          <span class="span2">日期</span>
          <el-date-picker
            v-model="selectTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy/MM/dd"
            :picker-options="pickerOptions">
          </el-date-picker>
          <span class="span2">订单来源</span>
          <el-select v-model="orderFrom" placeholder="请选择" clearable>
            <el-option v-for="item in options" :key="item.orderFrom" :label="item.label"
                       :value="item.orderFrom"></el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelQueryButton">取 消</el-button>
          <el-button type="primary" @click="queryByParams">确 定</el-button>
        </span>
      </el-dialog>
      <!--发货弹出框-->
      <el-dialog
        title="<订单发货>"
        :visible.sync="sendDialogVisible"
        width="30%"
        @open="open">
        <div>
          <span class="span2">请填写运输单号</span>
          <el-input v-model="deliveryId" placeholder="*请仔细核对运输单号"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="sendDialogVisible=false,orderNo=''">取 消</el-button>
          <el-button type="primary" @click="confirmSend">确 定</el-button>
        </span>
      </el-dialog>
      <!--关闭订单弹出框-->
      <el-dialog
        title="<关闭订单>"
        :visible.sync="closeDialogVisible"
        width="30%"
        @open="open">
        <div>
          <span class="span2">请填写订单关闭原因</span>
          <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入内容"
            v-model="reasonForCancel">
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialogVisible=false">取 消</el-button>
          <el-button type="primary" @click="closeOrder">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>

</template>

<script>
  export default {
    name: 'CloseOrders',
    data() {
      return {
        tableData: [],
        id: '',
        pageNum: '1',
        pageSize: '6',
        total: 0,
        orderNo: '',
        userId: '',
        status: '5',
        input: '',
        queryStartTime: null,
        queryEndTime: null,
        deliveryId: '',
        centerDialogVisible: false,
        sendDialogVisible: false,
        closeDialogVisible: false,
        reasonForCancel: '',
        options: [{
          orderFrom: '',
          label: '全部'
        }, {
          orderFrom: '1',
          label: '手机app'
        }, {
          orderFrom: '2',
          label: 'PC端'
        }, {
          orderFrom: '3',
          label: '小程序'
        }],
        orderFrom: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        //2021/01/23,2021/02/17
        selectTime: '',
      }
    },
    components: {},
    created() {
      this.getOrderList()
    },
    methods: {
      //监听每页条数改变
      handleSizeChange(val) {
        this.pageSize = val;
        this.getOrderList();
      },
      //监听当前页改变
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getOrderList();
      },
      handTime() {
        // let val = '2021/01/23,2021/02/17';
        //处理时间
        if (this.selectTime === '') {
          return
        }
        let obj = this.selectTime;
        // val = ["2021/01/14","2021/02/10"]
        let val = JSON.stringify(obj);
        val = val.replace(/\"/g, "");
        val = val.replace(/\[/g, "");
        val = val.replace(/\]/g, "");
        let str = val.split(',');
        this.queryStartTime = str[0];
        this.queryEndTime = str[1];
      },
      reset() {
        //重置按钮
        this.userId = '';
        this.orderNo = '';
        this.orderFrom = '';
        this.getOrderList();
      },
      openCloseOrderDialog(row) {
        this.closeDialogVisible = true;
        this.id = row.id;
      },
      closeOrder() {
        //关闭订单确认按钮执行
        this.closeDialogVisible = false;
        this.reasonForCancel = '';
        let data = {
          id: this.id,
          status: 5
        };
        this.axios.put("micro-mall-server/order/close", this.$qs.stringify(data), {})
          .then(res => {
            console.log(res.data);
            this.getOrderList()
          });

      },
      open() {
        //  打开弹窗执行
        this.userId = '';
        this.orderNo = '';
        this.reasonForCancel = ''
      },
      openSendDialog(row) {
        //发货
        this.sendDialogVisible = true;
        this.id = row.id;
      },
      confirmSend() {
        this.sendDialogVisible = false;
        let data = {
          id: this.id,
          deliveryId: this.deliveryId
        };
        this.axios.put("micro-mall-server/order/updateDelivery", this.$qs.stringify(data), {})
          .then(res => {
            console.log(res.data);
            this.getOrderList()
          });

        //  确认发货按钮
      },
      queryByParams() {
        //确定按钮  多个参数查询
        this.centerDialogVisible = false;
        this.handTime();
        this.getOrderList();
        // 清空时间
        this.selectTime = '';
        this.queryStartTime = null;
        this.queryEndTime = null
      },
      cancelQueryButton() {
        //  弹出层取消按钮
        this.centerDialogVisible = false;
        this.userId = '';
        this.orderNo = '';
        // 清空时间
        this.selectTime = '';
        this.queryStartTime = null;
        this.queryEndTime = null
      },
      //时间格式化
      formatDate: function (row, column) {
        // 获取单元格数据
        let data = row[column.property];
        // if (this.$MyComm.isEmpty(data)) {
        // 	return ''
        // }
        let dt = new Date(data);
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
      },
      selectTrigger(val) {
        this.orderFrom = val;
        this.getOrderList();
      },
      getOrderList() {
        this.axios.get('micro-mall-server/order/getOrderList', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            orderNo: this.orderNo,
            userId: this.userId,
            status: this.status,
            orderFrom: this.orderFrom,
            queryStartTime: this.queryStartTime,
            queryEndTime: this.queryEndTime,

          }
        }).then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
        })
      }
    },
  }
</script>
<style scoped>

  .div_inner {
    position: relative;
    font-size: 14px;
    display: inline-block;
  }

  .span {
    display: inline-block;
    margin-left: 15px;
  }

  .span2 {
    display: block;
    padding: 10px;
  }

  #search_bar {
    height: 90px;
    background-color: azure;
    line-height: 80px;
    margin-top: 5px;
  }

  #body {
    width: 100%;
  }
</style>
